<template>
  <div class="singer-song">
    <div class="song-info" v-for="(item, index) in songList" :key="index">
      <h4 class="song-name">{{ item.name }}</h4>
      <span class="song-author" v-for="(singerItem, index) in item.singer" :key="index">
        {{ singerItem.name }}
        <span v-show="index != item.singer.length - 1">/</span>
      </span>
      <span>·</span>
      <span class="song-album">{{ item.album.name }}</span>
    </div>
    <!-- <div>···</div> -->
    <div v-if="loading" class="loading-animation">···</div>
    <div v-else>···</div>
  </div>
</template>

<script>

export default {
  props: ["singerMid"],
  data() {
    return {
      songList: [],
      num: 20,
      page: 1,
      loading: false // 添加 loading 状态
    }
  },
  methods: {
    getDetail() {
      this.loading = true; // 开始加载时设置 loading 为 true
      this.$request('get', '/singer/songs', {
        singermid: this.singerMid,
        num: this.num,
        page: this.page
      }).then(res => {
        console.log(res);
        if (res.result == 100) {
          // this.songList = res.data.list
          //将新数据追加到原数组中
          this.songList = [...this.songList, ...res.data.list]
          this.loading = false; // 加载完成后设置 loading 为 false
          this.resetScroll() // 重置滚动条位置
        }
      })
    },
    getNext() {
      this.page += 1
      this.getDetail()
    },
    handleScroll() {
      // 获取当前窗口的高度。
      const windowHeight = window.innerHeight
      // 获取整个文档的高度（包括滚动部分）。
      const documentTop = document.documentElement.scrollHeight
      // 获取当前滚动条的垂直位置。分别用于不同的浏览器，确保兼容性。
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop + windowHeight >= documentTop) {
        this.getNext()
      }
    },
    resetScroll() {
      // 重置滚动条位置。
      window.scrollTo({
        top: document.documentElement.scrollTop || document.body.scrollTop,
        behavior: 'instant'
      })
    }
  },
  mounted() {
    this.getDetail();
    // 添加滚动事件监听器，监听页面的滚动事件，当滚动时调用 handleScroll 方法。
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    // 在组件销毁前移除滚动事件监听器，避免内存泄漏。
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped>
.singer-song {
  padding: 20px;
}

.song-info {
  margin-bottom: 10px;
}

.song-name {
  font-size: 18px;
}

.song-author {
  margin-right: 5px;
}

.song-album {
  color: #999;
}

.loading-animation {
  display: inline-block;
  animation: spin 1s linear infinite;
  /* spin动画持续1秒，以线性方式无限循环。 */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
